import React from "react";
import { Table, Card, Button, Tag, Space } from "antd";
import { PlusOutlined } from "@ant-design/icons";

const TeacherCourses: React.FC = () => {
  const mockCourses = [
    {
      id: "1",
      name: "Web开发实践",
      code: "CS301",
      students: 45,
      schedule: "周一 9:00-10:30",
      location: "A301",
      status: "进行中",
    },
    {
      id: "2",
      name: "操作系统",
      code: "CS302",
      students: 50,
      schedule: "周三 14:00-15:30",
      location: "B202",
      status: "进行中",
    },
    {
      id: "3",
      name: "数据结构",
      code: "CS303",
      students: 55,
      schedule: "周五 10:45-12:15",
      location: "A401",
      status: "未开始",
    },
  ];

  const columns = [
    {
      title: "课程名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "课程代码",
      dataIndex: "code",
      key: "code",
    },
    {
      title: "学生人数",
      dataIndex: "students",
      key: "students",
    },
    {
      title: "上课时间",
      dataIndex: "schedule",
      key: "schedule",
    },
    {
      title: "上课地点",
      dataIndex: "location",
      key: "location",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status: string) => (
        <Tag color={status === "进行中" ? "green" : "blue"}>{status}</Tag>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Space size="middle">
          <Button type="link">查看详情</Button>
          <Button type="link">编辑</Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <Card
        title="我的课程"
        extra={
          <Button type="primary" icon={<PlusOutlined />}>
            新增课程
          </Button>
        }
      >
        <Table columns={columns} dataSource={mockCourses} rowKey="id" />
      </Card>
    </div>
  );
};

export default TeacherCourses;
